<template>
	<view class="flex-col page">
		<view class="flex-col justify-start flex-auto group">
			<view class="flex-col list space-y-20">
				<view class="flex-row list-item" v-for="(item, index) in list" :key="index">
					<image class="shrink-0 self-center image_7" :src="item.cover" />
					<view class="flex-col flex-auto self-center group_2 space-y-23">
						<view class="flex-row items-center space-x-8">
							<text class="font_1">{{item.shop_name}}</text>
							<image class="image_8" v-if="item.is_license==1" src="/static/success.png" />
						</view>
						<view class="flex-row">
							<text class="font_2">{{item.score}}分</text>
							<view class="shrink-0 section_3 view"></view>
							<text class="font_3 text_2">人均￥{{item.avg_amounts}}</text>
							<view class="shrink-0 section_3 view_2"></view>
							<text class="font_3 text_3">销售{{item.sales}}</text>
						</view>
						<view class="flex-row items-center justify-between">
							<view class="flex-row items-center">
								<view class="flex-col justify-start items-center self-start text-wrapper" v-for="(item1,index1) in item.tags" :key="index1">
									<text class="font_4 text_4">{{item1}}</text>
								</view>
							</view>
							<text class=" font_5">距我{{item.distance}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	
	let list = ref([])
	let p = ref(1)
	onShow(() => {
		list.value.length=0
		p.value=1
		getDate()
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getDate()
	})
	const getDate=()=> {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.myCollect,{
			member_id:uni.getStorageSync('member_id')|'',
			p:p.value,
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
		}).then(res => {
			if (res.flag == "success") {
				list.value = [...list.value, ...res.data.list]
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const toDetail=(active_id,type)=>{
		uni.navigateTo({
			url: '/pages/buyingDetail/buyingDetail?type='+type+'&active_id=' + active_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 100vh;

		.group {
			padding: 30rpx 0 8rpx;
			overflow-y: auto;

			.list {
				margin: 0 30rpx;

				.list-item {
					padding: 32rpx 28rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.image_7 {
						border-radius: 20rpx;
						width: 196rpx;
						height: 148rpx;
					}

					.group_2 {
						margin-left: 20rpx;

						.space-x-8 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 8rpx;
							}

							.font_1 {
								font-size: 32rpx;
								font-family: PingFangSC;
								line-height: 31rpx;
								color: #333333;
							}

							.image_8 {
								width: 22rpx;
								height: 25rpx;
							}
						}

						.font_2 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 22rpx;
							color: #f52c2c;
						}

						.section_3 {
							background-color: #c1c1c1;
							border-radius: 0.5rpx;
							width: 1rpx;
							height: 20rpx;
						}

						.view {
							margin-left: 9rpx;
						}

						.font_3 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 22rpx;
							color: #585858;
						}

						.text_2 {
							margin-left: 11rpx;
							line-height: 23rpx;
						}

						.view_2 {
							margin-left: 11rpx;
						}

						.text_3 {
							margin-left: 16rpx;
							line-height: 23rpx;
						}

						.text-wrapper {
							padding: 8rpx 0;
							background-color: #eff5f0;
							border-radius: 6rpx;
							width: 80rpx;

							.font_4 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 22rpx;
								color: #54bc6e;
							}

							.text_4 {
								line-height: 21rpx;
							}
						}
					}

					.space-y-23 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 23rpx;
						}
					}

					.font_5 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22rpx;
						color: #aeaeae;
					}

					.text_5 {
						margin-left: 6rpx;
						margin-top: 115rpx;
					}
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>